<!--
 * @Date: 2024-05-26 12:51:49
 * @LastEditors: wkl
 * @LastEditTime: 2024-05-31 23:49:40
 * @FilePath: /demo/双色球/line-stack-copy.html
-->

<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="echartsCon" style="display: flex;flex-wrap: wrap;">
  </div>

  <div id="cont-dom" style="height: 100%;width: 600px;"></div>

  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

  <script type="text/javascript">
    let dom = ''
    data.forEach((item, index) => {
      dom += `<div class="chat"><span>第 ${index + 1} 列</span> <div id="container${index}" style="height: 400px;width: 600px;"></div></div>`
    });
    document.getElementById('echartsCon').innerHTML = dom


    // 生成Chart
    function creatChart(domId, item, index) {
      var dom = document.getElementById(domId, data);
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;

      option = {
        xAxis: {
          type: 'category',
          data: data[index].x
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data[index].data,
          type: 'line',
          smooth: true
        }]
      };


      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }

    data.forEach((item, index) => {
      creatChart(`container${index}`, data, index)
    })

    let doms = ''
    data.forEach((item, index) => {
      doms+=`<span>${JSON.stringify(item.top)}</span></br>`
    })
    document.getElementById('cont-dom').innerHTML=doms

   
  </script>
</body>

</html>